<template>
  <div>
    <v-card style="width:100%;">
      <v-card-title>
        <h3>{{name}}</h3>
      </v-card-title>
    </v-card>
    <p></p>
      <v-card >
        <v-card-title>
          <v-btn dark color="teal" @click.stop="projectReportDownload" small><v-icon dark>file_download</v-icon></v-btn>
        </v-card-title>
          <v-data-table
            :headers="headers"
            :items="items"
            :pagination.sync="pagination"
            :total-items="totalItems"
            :loading="loading"
            :rows-per-page-items="rowsPerPageItems"
            :no-data-text="etext"
            class="elevation-1">
            <template slot="items" slot-scope="props">
               <td class="reportstyle" v-for="(value) in headers" :key="value.id">{{props.item[value.value]}}</td>
            </template>
            <template slot="no-data">
              <v-alert :value="true" color="error" icon="warning">
                {{etext}}
              </v-alert>
            </template>
          </v-data-table>
      </v-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('project_report')

export default {
  data: function () {
    return this.$store.state.project_report
  },
  watch: {
    pagination () {
      this.handlerProjectReport()
    },
    search () {
      this.handlerProjectReport()
    }
  },
  methods: {
    ...mapActions({
      handlerProjectReport: 'handlerProjectReport',
      loadProjectReportFilters: 'loadProjectReportFilters',
      projectReportDownload: 'projectReportDownload',
      loadProjectReportHeaders: 'loadProjectReportHeaders'
    })
  },
  mounted () {
    this.loadProjectReportHeaders()
  }
}
</script>
